<template>
    <div class="CompontensViews">
        <div class="bs-tabs">
            <div>
                <el-button :type="activeFlag == index ? 'primary' : ''" size="mini" v-for="(value, index) in tabs_list"
                    :key="index" @click="activeFlag = index" style="width: 15% !important;"
                    :disabled="drwMgtDataLength == 0 && index != 0">
                    {{ value.title }}
                </el-button>
                <!-- {{ isChangeFlg }} -->
            </div>
            <!-- <div v-if="activeFlag != 2" class="addBtn">
                <el-button type="default" :class="isAddFlg && activeFlag == 0 ? 'red' : ''" size="mini"
                    style="margin-right: 8px;" @click="addFn">追加</el-button>
                <el-button type="default" size="mini" @click="delFn"
                    :disabled="isAddFlg || (drwMgtDataLength == 0 && activeFlag == 0) || ($refs.tab2.Data.length == 0 && activeFlag == 1)">削除</el-button>
            </div> -->
        </div>

        <div class="add">
            <span></span>
            <div v-if="activeFlag != 2">
                <el-button type="default" :class="isAddFlg && activeFlag == 0 ? 'red' : ''" size="mini"
                    style="margin-right: 8px;" :disabled="!addBtnFlg" @click="addFn">追加</el-button>
                <el-button type="default" size="mini" @click="delFn"
                    :disabled="isAddFlg || (drwMgtDataLength == 0 && activeFlag == 0) || ($refs.tab2.Data.length == 0 && activeFlag == 1)">削除</el-button>
            </div>
        </div>

        <div class="container" :class="drwMgtDataLength == 0 && !(isAddFlg && activeFlag == 0) ? 'mask' : ''">
            <tab1 ref="tab1" v-show="activeFlag == 0" :PltCode="PltCode" :Code="Code" @isAddFlgFn="isAddFlgFn"
                :Label="Label" @isChangeFlgFn="isChangeFlgFn"
                :addFlg="drwMgtDataLength == 0 && !(isAddFlg && activeFlag == 0)">
            </tab1>
            <tab2 ref="tab2" v-show="activeFlag == 1" :PltCode="PltCode" :Code="Code" :Label="Label"
                @isChangeFlgFn="isChangeFlgFn" :leftCodName="leftCodName"></tab2>
            <tab3 ref="tab3" v-show="activeFlag == 2" :PltCode="PltCode" :Code="Code" @isChangeFlgFn="isChangeFlgFn">
            </tab3>
            <div class="footer">
                <el-button @click="CancelFn"
                    :disabled="drwMgtDataLength == 0 && !(isAddFlg && activeFlag == 0)">Cancel</el-button>
                <!-- <el-button class="okBTn" :disabled="isChangeFlg"
                    @click="isClickSaveBtn = true, saveFn(true)">編集内容を保存</el-button> -->
                <el-button type="primary" class="okBTn" @click="isClickSaveBtn = true, saveFn(true)"
                    :disabled="drwMgtDataLength == 0 && !(isAddFlg && activeFlag == 0)">編集内容を保存</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import tab1 from './tabs/tab1';
import tab2 from './tabs/tab2';
import tab3 from './tabs/tab3';
import { GetSysIntelligenceMsg, GetInitSysIntelligence, UpdSysIntelligence, DelSysIntelligence, getEnvLabel } from "@/api/api";

import eventBus from "@/eventBus/bus";
import { showLoading, hideLoading } from "@/utils/loading";
import _ from 'lodash-es';
export default {
    name: "BasicStyleCompontens",
    props: ["PltCode", "Code", "drwMgtDataLength", "leftCodName", "addBtnFlg"],
    data() {
        return {
            isClickSaveBtn: false,
            tabs_list: [
                { title: "系統情報", },
                { title: "損傷要因", },
                { title: "図書関連付け", },
            ],
            activeFlag: 0,
            isAddFlg: false,
            Label: [
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 1
                },
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 2
                },
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 3
                },
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 4
                },
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 5
                },
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 6
                },
                {
                    "label": null,
                    "dataVal": " ",
                    "dtlNo": 7
                }
            ],

            isChangeFlg: false,  //  是否编辑 的标识    true-?没有更改，则不可点击，false-?更改过可点击
            isAddBtn: false,  //  是否编辑 的标识    true-?没有更改，则不可点击，false-?更改过可点击
        };
    },
    components: {
        tab1, tab2, tab3
    },
    watch: {

    },
    computed: {

    },
    methods: {
        isChangeFlgFn(e) {
            this.isChangeFlg = e;
            this.$store.commit("changeIsCurrentNext", this.isChangeFlg);
            /**
             * 1。  isCurrentNext。false=>不往下，即出保存弹框。
             */
            console.log('changeIsCurrentNext', this.$store.state.isCurrentNext);
        },
        //  总体追加番号按钮
        addFn() {
            //  tab1
            if (this.activeFlag == 0) {
                if (!this.isChangeFlg) {
                    this.isAddBtn = true;
                    this.saveFn();
                    return
                }
                this.isAddFlg = true;
                this.GetInitSysIntelligenceFn(1);
            }
            //  tab2
            if (this.activeFlag == 1) {
                this.$refs.tab2.addFn();
            }
        },
        isAddBtnFn() {
            if (this.isAddBtn) {
                this.isAddBtn = false;
                this.isAddFlg = true;
                this.GetInitSysIntelligenceFn(1);
            }
        },

        delFn() {
            //  tab1总削除
            if (this.activeFlag == 0) {
                this.delMFn();
            }
            //  tab2
            if (this.activeFlag == 1) {
                this.$refs.tab2.delFn();
            }
        },
        // 子组件让按钮变色
        async isAddFlgFn(flg) {
            this.isAddFlg = flg;
        },
        //  保存
        async saveFn(clear = false) {
            let tips = await this.GetSysIntelligenceMsgFn(1);
            this.$confirm(tips, '', {
                confirmButtonText: this.$t("message.public.confirm"),
                cancelButtonText: this.$t("message.public.cancel"),
                type: "warning",
            })
                .then(async () => {
                    let dataJson = {
                        "pltCode": this.PltCode,
                        "code": this.Code,
                        "sysIntelligenceAdd": Number(this.isAddFlg),    //追加
                        "sysIntelligenceEdit": 1,   //编辑
                        "causeOfInjuryEdit": 1,     //编辑
                        "relatedBooksEdit": 1,      //编辑
                        "sysIntelligence": {
                            "codName": "更新後",
                            "codFlna": "更新後",
                            "codOrdr": 9999,
                            "comment1": "更新後",
                            "comment2": "更新後",
                            "comment5": "更新後",
                            "conditions": [
                                {
                                    "clPara": "更新後",
                                    "clType": "更新後",
                                    "clUnit": "更新後",
                                    "clNote": "更新後",
                                    "code": "更新後",
                                    "clCode": "更新後"
                                }
                            ]
                        },
                        "causeOfInjury": [
                            {
                                "dispNo": "string",
                                "dmgClsName": "湿性腐食",
                                "dmgName": "H2S-HCl-H2O腐食",
                                "mtrCls": "－",
                                "machanism": "常圧蒸留装置の蒸留・精留塔頂部分に発生する損傷。原油中の硫化物・塩化物の加熱分解でH2S・HClが生成・濃縮して金属が腐食する現象。",
                                "expPart": "原油蒸留塔頂部",
                                "ispWayName": "ＶＩ，ＵＴＭ，ＵＴ，水浸ＵＴ，ＲＴ，ＲＦＥＴ",
                                "exaFact": "pH（１~６）で発生",
                                "code": 0,
                                "damCode": 0,
                                "damClsCode": 97,
                                "damNameCode": 1,
                                "mtrClsCode": 26
                            }
                        ],
                        "relatedBooks": [
                            {
                                "bookTil": "dasd",
                                "bookName": "asdsad",
                                "bookPath": "string",
                                "code": 0,
                                "docCode": 0,
                                "fileId": "",
                                "bookNo": 0
                            }
                        ]
                    };
                    dataJson.sysIntelligence = this.$refs.tab1.Data;
                    dataJson.causeOfInjury = this.$refs.tab2.Data;
                    dataJson.relatedBooks = this.$refs.tab3.Data;
                    dataJson.MacNumb = this.$refs.tab1.Data.codName;

                    // 追加行已赋值insert，削除行，已无，此处为修改行，
                    let length1 = this.$refs.tab2.Data.length;
                    let length2 = this.$refs.tab2.DataClone.length;
                    for (let index1 = 0; index1 < length1; index1++) {
                        let item1 = this.$refs.tab2.Data[index1];
                        for (let index2 = 0; index2 < length2; index2++) {
                            let item2 = this.$refs.tab2.DataClone[index2];
                            // console.log('123', !_.isEqual(item1, item2), item1, item2);
                            item2._XID = item1._XID
                            if (item1.id == item2.id && !_.isEqual(item1, item2)) {
                                item1.update = 1;
                                console.log('123123123', this.$refs.tab2.Data, item1);
                            }
                        }
                    }


                    let res = await UpdSysIntelligence(dataJson);
                    /**
                     * 5-1。    保存失败。重置记录。
                     * 5-2。    保存成功。执行保存的函数，执行重置记录。
                     * 5-3。    取消操作。重置记录。
                     * 
                     * 如果是追加按钮过来的话。。。失败不动。。。成功到追加状态
                     */
                    if (!res) {
                        // this.$store.commit("reSetIsCurrent");
                        this.$emit('chenOldParams');
                        this.isClickSaveBtn = false;

                        // this.isAddBtnFn();
                        return
                    }
                    if (res.data.code == 0) {
                        showLoading();
                        this.isChangeFlg = true;
                        /**
                         *      是否通过保存按钮出现的弹框
                         */
                        if (this.isClickSaveBtn) {
                            eventBus.$emit('isChangeName', dataJson.sysIntelligence.codName);
                        } else {
                            eventBus.$emit('EveSySViewRefreshList');
                            eventBus.$emit('isChangeName', dataJson.sysIntelligence.codName);
                            if (this.$store.state.isCurrentFn) {
                                this.$store.state.isCurrentFn();
                            }
                        }
                        this.$store.commit("reSetIsCurrent");
                        this.isClickSaveBtn = false;
                        this.$message.success(res.data.msg);
                        this.isAddBtnFn();

                        hideLoading();
                        return
                    }
                    this.$alert(res.data.msg, '', {
                        confirmButtonText: 'OK',
                        type: 'warning',
                    });
                })
                .catch(() => {
                    if (clear) {
                        // this.$store.commit("reSetIsCurrent");
                        return
                    }
                    this.$store.state.isCurrentFn();
                    this.$store.commit("reSetIsCurrent");
                    this.isClickSaveBtn = false;
                    this.isAddBtnFn();

                    // this.$store.state.isCurrentFn();
                });
        },
        async delMFn() {
            let tips = await this.GetSysIntelligenceMsgFn(2);
            this.$confirm(tips, '', {
                confirmButtonText: this.$t("message.public.confirm"),
                cancelButtonText: this.$t("message.public.cancel"),
                type: "warning",
            })
                .then(async () => {
                    let dataJson = {
                        "pltCode": this.PltCode,
                        "code": this.Code,
                    };
                    let res = await DelSysIntelligence(dataJson);
                    if (!res) {
                        return
                    }
                    eventBus.$emit('isChangeName', "")
                    if (res.data.code == 0) {
                        this.$message.success(res.data.msg);
                        return
                    }
                    this.$alert(res.data.msg, '', {
                        confirmButtonText: 'OK',
                        type: 'warning',
                    });
                })
                .catch(() => { });
        },
        //  获取追加默认值   
        async GetInitSysIntelligenceFn(Type) {
            let dataJson = {
                PltCode: this.PltCode || this.$store.state.pltCode,
                Type
            };
            let res = await GetInitSysIntelligence(dataJson);
            if (res.data.code != 0) {
                this.isAddFlg = false;
                this.$alert(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });
                return
            }
            if (Type == 1) {
                this.$refs.tab1.Data = res.data.data.sysIntelligence;
                this.$refs.tab2.Data = res.data.data.causeOfInjury;
                this.$refs.tab3.Data = res.data.data.relatedBooks;
                this.$refs.tab2.handleRow = {
                    machanism: null,
                    expPart: null,
                    ispWayName: null,
                    exaFact: null,
                };
            }
        },
        //  获取提示信息
        async GetSysIntelligenceMsgFn(type) {
            let dataJson = {
                PltCode: this.PltCode,
                MacName: this.$refs.tab1.Data.codName,
                type
            };
            let res = await GetSysIntelligenceMsg(dataJson);
            return res.data.msg;
        },

        //  取消按钮
        CancelFn() {
            this.$refs.tab1.GetSysIntelligenceFn();
            this.$refs.tab2.GetSysIntelligenceFn();
            this.$refs.tab3.GetSysIntelligenceFn();
        },

        // 获取label的值
        async getEnvLabelFn() {
            showLoading();
            let dataJosn = {
                LawCode: 1,
                CtgCode: 1,
            }
            let res = await getEnvLabel(dataJosn);
            this.Label = res.data.data.systemIntelligence;
            hideLoading();
        },
    },

    created() {
        this.getEnvLabelFn();
    },
    mounted() {
        eventBus.$on("EventBusSysViewInfoSaveFn", () => {
            this.saveFn();
        })
    },
    beforeDestroy() {
        eventBus.$off("EventBusSysViewInfoSaveFn")
    },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.CompontensViews {
    width: 100%;
    height: 100%;

    .add {
        min-height: 70px;
        width: 71.2%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 26px 0 12px 0;

        button {
            // background-color: #fff;
            width: 60px !important;
            height: 32px;
        }

        .pl15 {
            padding-left: 15px;
        }

        .form-ipt {
            width: 200px;
            height: 24px;

            ::v-deep .el-input__inner {
                height: 24px;
                background: #fff;
            }

            ::v-deep .el-input__icon {
                line-height: 24px;
            }
        }

        .red {
            background-color: rgb(188, 0, 15);
            color: #FFF;
            border: 0;
        }
    }
}

.bs-tabs {
    margin-top: 16px;
    width: 72%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // div {
    //     width: 50%;
    // }

    .el-button {
        margin-left: 0px;
        min-width: 155px;
        width: 155px;
        border-radius: 2px !important;
    }

    .red {
        background-color: rgb(188, 0, 15);
        color: #FFF;
        border: 0;
    }

    .addBtn {
        .el-button {
            min-width: 82px;
            width: 82px;
            border-radius: 4px !important;
        }
    }
}

.container {
    position: relative;
    width: 100%;
    height: calc(100% - 172px);
    display: flex;
    justify-content: space-between;
    // margin-top: 4px;
}

.content-center {
    width: 72%;
    max-height: calc(100% - 51px);
    overflow-y: auto;
    border: 1px solid #c3c3c3;
}

.right-container-view {
    height: 100%;
    width: calc(38% - 15px);
    margin-left: 20px;
}

.footer {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    bottom: 5px;
    left: 0;
    transform: translateY(3px);

    button {
        width: 123px;
        padding: 0 15px;
        height: 32px;
        // background: #ffffff;
        // border: 1px solid #d9d9d9;
        text-align: center;
        line-height: 32px;
        margin-right: 16px;
        border-radius: 0;
    }

    .okBTn {
        // background: #106ebe;
        // color: #fff;
    }
}

.elx-table--empty-content {
    transform: translateY(30px);
}

.other-btn {
    background-color: #FFF;
    border-radius: 0 !important;
}

.mask {
    cursor: not-allowed;

    /* 更改为 not-allowed 以表示禁止交互 */
    ::v-deep .el-textarea__inner {
        pointer-events: none !important;
        /* 禁止点击和其他指针事件 */
    }

    ::v-deep .el-input__inner {
        pointer-events: none !important;
        /* 禁止点击和其他指针事件 */
    }

    ::v-deep .el-button {
        pointer-events: none !important;
        /* 禁止点击和其他指针事件 */
    }
}
</style>
